import { Card, CardBody, CardHeader } from "@heroui/react";

import DefaultLayout from "@/layouts/default";

export default function IndexPage() {
  // Mock data for statistics
  const statsData = [
    { title: "今日作业数", value: "12", change: "+2%", description: "较昨日" },
    { title: "车辆在线数", value: "24", change: "+5%", description: "较昨日" },
    { title: "司机在线数", value: "18", change: "+3%", description: "较昨日" },
    { title: "作业完成率", value: "85%", change: "+12%", description: "较昨日" },
  ];

  // Mock data for recent activities
  const recentActivities = [
    { id: 1, driver: "张三", vehicle: "京A12345", task: "货物运输", time: "2023-05-15 08:30" },
    { id: 2, driver: "李四", vehicle: "京B67890", task: "货物配送", time: "2023-05-15 09:15" },
    { id: 3, driver: "王五", vehicle: "京C11111", task: "货物运输", time: "2023-05-15 10:00" },
    { id: 4, driver: "赵六", vehicle: "京D22222", task: "货物配送", time: "2023-05-15 11:20" },
  ];

  // Mock data for vehicle status
  const vehicleStatus = [
    { id: 1, plate: "京A12345", status: "运行中", driver: "张三" },
    { id: 2, plate: "京B67890", status: "待命中", driver: "李四" },
    { id: 3, plate: "京C11111", status: "维修中", driver: "王五" },
    { id: 4, plate: "京D22222", status: "运行中", driver: "赵六" },
  ];

  // Mock data for chart
  const chartData = [
    { month: "1月", value: 65 },
    { month: "2月", value: 78 },
    { month: "3月", value: 90 },
    { month: "4月", value: 81 },
    { month: "5月", value: 95 },
    { month: "6月", value: 88 },
  ];

  return (
    <DefaultLayout>
      <div className="flex flex-col gap-6 py-6">
        {/* Page Title */}
        <div className="flex flex-col gap-2">
          <h1 className="text-2xl font-bold">Dashboard</h1>
          <p className="text-default-500">Welcome back, Admin</p>
        </div>

        {/* Statistics Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {statsData.map((stat, index) => (
            <Card key={index} className="border-none shadow-sm">
              <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
                <p className="text-tiny uppercase font-bold text-default-500">{stat.title}</p>
                <h4 className="font-bold text-large">{stat.value}</h4>
              </CardHeader>
              <CardBody className="overflow-visible py-2">
                <div className="flex items-center gap-1">
                  <span className="text-success text-tiny">{stat.change}</span>
                  <span className="text-default-500 text-tiny">{stat.description}</span>
                </div>
              </CardBody>
            </Card>
          ))}
        </div>

        {/* Charts and Data Sections */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Chart */}
          <div className="lg:col-span-2">
            <Card className="shadow-sm">
              <CardHeader className="flex gap-3">
                <div className="flex flex-col">
                  <p className="text-md">作业统计</p>
                  <p className="text-small text-default-500">最近6个月作业完成情况</p>
                </div>
              </CardHeader>
              <CardBody>
                {/* Simple bar chart representation */}
                <div className="flex items-end justify-between h-48 gap-2">
                  {chartData.map((item, index) => (
                    <div key={index} className="flex flex-col items-center flex-1">
                      <div className="text-tiny text-default-500 mb-2">{item.month}</div>
                      <div 
                        className="w-full bg-primary rounded-t-lg transition-all duration-500 ease-in-out hover:opacity-80"
                        style={{ height: `${item.value}%` }}
                      ></div>
                      <div className="text-tiny mt-2">{item.value}</div>
                    </div>
                  ))}
                </div>
              </CardBody>
            </Card>
          </div>

          {/* Vehicle Status */}
          <div>
            <Card className="shadow-sm">
              <CardHeader className="flex gap-3">
                <div className="flex flex-col">
                  <p className="text-md">车辆状态</p>
                  <p className="text-small text-default-500">当前车辆运行情况</p>
                </div>
              </CardHeader>
              <CardBody>
                <div className="space-y-4">
                  {vehicleStatus.map((vehicle) => (
                    <div key={vehicle.id} className="flex items-center justify-between py-2 border-b border-default-200 last:border-0">
                      <div className="flex flex-col">
                        <p className="text-md font-medium">{vehicle.plate}</p>
                        <p className="text-small text-default-500">{vehicle.driver}</p>
                      </div>
                      <span className={`px-2 py-1 rounded text-tiny font-medium ${
                        vehicle.status === "运行中" 
                          ? "bg-success/20 text-success" 
                          : vehicle.status === "待命中" 
                            ? "bg-warning/20 text-warning" 
                            : "bg-danger/20 text-danger"
                      }`}>
                        {vehicle.status}
                      </span>
                    </div>
                  ))}
                </div>
              </CardBody>
            </Card>
          </div>
        </div>

        {/* Recent Activities and Notifications */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Recent Activities */}
          <Card className="shadow-sm">
            <CardHeader>
              <p className="text-md">最近作业</p>
            </CardHeader>
            <CardBody>
              <div className="space-y-4">
                {recentActivities.map((activity) => (
                  <div key={activity.id} className="flex items-center justify-between py-2 border-b border-default-200 last:border-0">
                    <div className="flex flex-col">
                      <p className="text-md font-medium">{activity.driver}</p>
                      <p className="text-small text-default-500">{activity.vehicle} · {activity.task}</p>
                    </div>
                    <div className="text-small text-default-500">{activity.time}</div>
                  </div>
                ))}
              </div>
            </CardBody>
          </Card>

          {/* System Notifications */}
          <Card className="shadow-sm">
            <CardHeader>
              <p className="text-md">系统通知</p>
            </CardHeader>
            <CardBody>
              <div className="space-y-4">
                <div className="flex gap-3">
                  <div className="bg-primary/10 p-2 rounded-lg">
                    <div className="bg-primary w-2 h-2 rounded-full"></div>
                  </div>
                  <div className="flex flex-col">
                    <p className="text-md">系统维护通知</p>
                    <p className="text-small text-default-500">今晚 23:00-24:00 系统将进行维护</p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <div className="bg-success/10 p-2 rounded-lg">
                    <div className="bg-success w-2 h-2 rounded-full"></div>
                  </div>
                  <div className="flex flex-col">
                    <p className="text-md">新功能上线</p>
                    <p className="text-small text-default-500">作业统计功能已上线</p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <div className="bg-warning/10 p-2 rounded-lg">
                    <div className="bg-warning w-2 h-2 rounded-full"></div>
                  </div>
                  <div className="flex flex-col">
                    <p className="text-md">安全提醒</p>
                    <p className="text-small text-default-500">请定期修改密码确保账户安全</p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <div className="bg-danger/10 p-2 rounded-lg">
                    <div className="bg-danger w-2 h-2 rounded-full"></div>
                  </div>
                  <div className="flex flex-col">
                    <p className="text-md">系统升级</p>
                    <p className="text-small text-default-500">系统将于下周一进行版本升级</p>
                  </div>
                </div>
              </div>
            </CardBody>
          </Card>
        </div>
      </div>
    </DefaultLayout>
  );
}